<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/1.css"/>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<style>
			.my-enter-from{
            opacity: 0;
        }
        .my-enter-to{
            opacity: 1;
        }
        .my-leave-from{
            opacity: 1;
        }
        .my-leave-to{
            opacity: 0;
        }
        .my-enter-active,.my-leave-active{
            transition: opacity 1s linear 0s;
        }
        .my-enter-active{
            animation: myanimation 2s;
        }
        .my-leave-active{
            animation: myanimation 2s reverse;
        }
        /* @keyframes myanimation{
            0%{
                transform:scale(0);
            }
            50%{
                transform: scale(1.5);
            }
            100%{
                transform: scale(2);
            }
        }  */
		</style>
	</head>
	<body>
		<div id="app"></div>
		<template id="root">
			<button @click="play()">跌丝袜</button>
			<transition name="my">
			<div class="card" v-show="show">
			<h3>登录后更精彩</h3>
			<form>
				<input type="email" id="email" name="email" placeholder="邮箱"/>
				<input type="password" id="password" name="password" placeholder="密码"/>
				<input type="submit" value="登录"/>
			</form>
			<ul>
				<li><a href="#">注册</a></li>
				<li><a href="#">忘记密码</a></li>
			</ul>
		</div>
		</transition>
		</template>
	</body>
	<script>
        const app = Vue.createApp({
            template: "#root",
            data() {
                return {
                    show:true,
                }
            },
            methods:{
                play(){
					this.show=!this.show;
				}
            }
        })
        app.mount('#app')
    </script>
</html>
